import React, { Component } from 'react'

export default class Input extends Component {
    state = {
        userName: "11",
        passWord: "22",
        flag: true,
        val: ""
    }
    login = () => {
        // 
        console.log(this.state.userName, this.state.passWord, this.state.flag, this.state.val)
    }
    render() {
        const { userName, passWord, flag, val } = this.state
        return (
            <div>
                {/* 输入框 */}
                {/* <textarea name="" id="" cols="30" rows="10"></textarea> */}
                <p>
                    账号: <input value={ userName } onChange={(ev) => {
                        this.setState({
                            userName: ev.target.value
                        })
                    }} type="text" />
                </p>
                <p>
                    密码: <input value={ passWord } onChange={(ev) => {
                        this.setState({
                            passWord: ev.target.value
                        })
                    }} type="text" />
                </p>
                {/* 多选 */}
                <div>
                    <p>
                        足球<input checked = { flag } onChange={(ev) => {
                            this.setState({
                                flag: ev.target.checked
                            })
                        }} type="checkbox" />
                    </p>
                    <p>
                        蓝球<input type="checkbox" />
                    </p>
                </div>
                {/*  */}
                <div>
                    <select value={val} onChange={(ev) => {
                        this.setState({
                            val: ev.target.value
                        })
                    }} name="" id="">
                        <option value="aa">选项1</option>
                        <option value="bb">选项2</option>
                    </select>
                </div>
                <button onClick={ this.login }>登录</button>
            </div>
        )
    }
}
